<mat-grid-list cols="2" rowHeight="600px">
  <mat-grid-tile colspan="1" rowspan="1">
    <mat-grid-tile-header>Angular Material Card</mat-grid-tile-header>
    <mat-card class="card under">
      <mat-card-header>
        <img mat-card-avatar [src]="url + '/assets/img/shiba1.jpg'">
        <mat-card-title>Shiba Inu</mat-card-title>
      </mat-card-header>
      <img mat-card-image [src]="url + '/assets/img/shiba2.jpg'">
    </mat-card>
  </mat-grid-tile>
  <mat-grid-tile colspan="1" rowspan="1">
    <mat-grid-tile-header>Boostrap-MD Card</mat-grid-tile-header>
    <mdb-card class="card under">
      <mdb-card-body>
        <mdb-card-title>
          <div class="avatar">
            <img [src]="url + '/assets/img/shiba1.jpg'" class="rounded-circle" style="width:60px;height:60px;">
            <p>Shiba Inu</p>
          </div>
        </mdb-card-title>
      </mdb-card-body>
      <div class="view rgba-white-slight waves-light" mdbWavesEffect>
        <mdb-card-img [src]="url + '/assets/img/shiba2.jpg'"></mdb-card-img>
      </div>
    </mdb-card>
  </mat-grid-tile>
  <mat-grid-tile colspan="2" rowspan="1">
    <mat-grid-tile-header>Boostrap-MD Carousel</mat-grid-tile-header>
    <mdb-carousel [isControls]="true" [animation]="'slide'" class="under">
      <mdb-carousel-item>
        <img class="d-block w-100" [src]="url + '/assets/img/img%20(130).jpg'" alt="First slide">
      </mdb-carousel-item>
      <mdb-carousel-item>
        <img class="d-block w-100" [src]="url + '/assets/img/img%20(129).jpg'" alt="Second slide">
      </mdb-carousel-item>
      <mdb-carousel-item>
        <img class="d-block w-100" [src]="url + '/assets/img/img%20(70).jpg'" alt="Third slide">
      </mdb-carousel-item>
    </mdb-carousel>
  </mat-grid-tile>
</mat-grid-list>